<script>
//单个组件
export default {
  name: 'ChartCard',
  props: {
    type: {
      type: String,
      default: '',
    },
    allOptions: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isEdit: false,
    };
  },
  events: {
    'on-intoEdit': 'editChart',
  },
  mounted() {
    if (this.$route.name === 'ChartCardEdit') {
      this.isEdit = true;
    }
  },
  methods: {
    editChart(status) {
      this.isEdit = status;
    },
  },
  render(createElement) {
    if (this.type === '') {
      return <div class="datav-edit-chart">暂无可视化图表，请选择数据和图表。</div>;
    } else if (this.isEdit) {
      window.dispatchEvent(new Event('resize'));
      return createElement(
        'div',
        {
          class: 'datav-edit-parent',
        },
        [
          createElement(this.type, {
            props: this.allOptions,
            class: 'datav-edit-chart',
          }),
        ]
      );
    } else {
      window.dispatchEvent(new Event('resize'));
      return createElement(this.type, {
        props: this.allOptions,
        class: 'datav-edit-chart',
      });
    }
  },
};
</script>


<style lang="less" scoped>
.datav-edit-chart {
  width: 100% !important;
  margin: auto;
  height: 100%;
  background-color: #e4e5e7;
  font-size: 20px;
}
.datav-edit-parent {
  width: 96% !important;
  margin: auto;
  height: 100%;
  padding-top: 32px;
}
</style>
